<template>
  <!-- 新增修改推窗 -->
  <BaseDrawer
    width="600px"
    :title="drawerTitle"
    placement="right"
    v-model:visible="open"
    :maskClosable="false"
    @close="handleClose"
  >
    <template #default>
      <BaseForm
        ref="BaseFormRef"
        :formData="formDataObj"
        :data="formState"
        :rules="rules"
      />
    </template>
    <template #footer>
      <a-button type="primary" @click.prevent="handleSubmit">{{
        t("common.okText")
      }}</a-button>
      <a-button class="ml-3" @click="handleClose">{{
        t("common.cancelText")
      }}</a-button>
    </template>
  </BaseDrawer>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, onMounted, nextTick } from "vue";
import BaseDrawer from "@/components/BaseDrawer/index.vue";
import BaseForm from "@/components/BaseForm/index.vue";
import {
  getNoticeById,
  addNotice,
  updateNotice,
} from "@/api/admin/system/notice";
import { getDict } from "@/utils/dictFormat";
import useDrawer from "@/hooks/useDrawer";
import { message as Message } from "ant-design-vue";
import { INotice } from "@/api/admin/system/notice/type";
import { IData } from "@/api/admin/system/dict/data/type";
import { useI18n } from "@/hooks/useI18n";

const { t } = useI18n();

interface FormState {
  id: undefined | number;
  noticeTitle: undefined | string;
  noticeType: undefined | number;
  status: undefined | string;
  noticeContent: undefined | string;
}

export default defineComponent({
  components: {
    BaseForm,
    BaseDrawer,
  },
  emits: ["finished"],
  setup(props, { expose, emit }) {
    const BaseFormRef = ref();
    const disableOptions = ref<IData[]>([]);
    const typeOptions = ref<IData[]>([]);
    const rules = {
      noticeTitle: [
        {
          required: true,
          message: t("routes.notice.noticeTitleCannotBeEmpty"),
          trigger: "blur",
        },
      ],
      noticeType: [
        {
          required: true,
          message: t("routes.notice.noticeTypeCannotBeEmpty"),
          trigger: "blur",
        },
      ],
      status: [
        {
          required: true,
          message: t("routes.notice.statusCannotBeEmpty"),
          trigger: "change",
        },
      ],
    };

    const formDataObj = reactive([
      {
        name: "noticeTitle",
        label: t("routes.notice.noticeTitle"),
        type: "input",
        value: undefined,
        span: 24,
        placeholder: t("routes.notice.noticeTitle"),
      },
      {
        name: "noticeType",
        label: t("routes.notice.noticeType"),
        type: "select",
        value: undefined,
        span: 24,
        placeholder: t("routes.notice.noticeTypePlaceholder"),
        options: typeOptions.value,
        serialize: {
          value: "dictValue",
          label: "dictLabel",
        },
      },
      {
        name: "status",
        label: t("routes.notice.status"),
        type: "radio-group",
        span: 24,
        value: undefined,
        options: disableOptions.value,
      },
      {
        name: "noticeContent",
        label: t("routes.notice.noticeContentPlaceholder"),
        type: "textarea",
        span: 24,
        value: undefined,
        placeholder: t("routes.notice.noticeContentPlaceholder"),
      },
    ]);
    const formState: FormState = reactive({
      id: undefined,
      noticeTitle: undefined,
      noticeType: undefined,
      status: "1",
      noticeContent: undefined,
    });
    const { open, drawerTitle, handleOpenDrawer, handleCloseDrawer } =
      useDrawer();

    const handleClose = (cb?: () => void) => {
      handleCloseDrawer.value(() => {
        formState.id = undefined;
        BaseFormRef.value.resetFields();
        cb && typeof cb === "function" && cb();
      });
    };
    // 表单提交
    const handleSubmit = () => {
      console.log(formState);
      BaseFormRef.value.handleSubmit((data) => {
        console.log(data);
        if (data.id) {
          updateNotice(data).then((res) => {
            handleClose(() => {
              Message.success(res.message);
              emit("finished");
            });
          });
        } else {
          addNotice(data).then((res) => {
            handleClose(() => {
              Message.success(res.message);
              emit("finished");
            });
          });
        }
      });
    };
    const handleShow = (row?: INotice) => {
      handleOpenDrawer.value(() => {
        if (row && row.id) {
          drawerTitle.value = t("common.update");
          getNoticeById(row.id).then((res) => {
            open.value = true;
            nextTick(() => {
              Object.keys(formState).forEach((key) => {
                formState[key] = res.data[key];
              });
            });
          });
        } else {
          drawerTitle.value = t("common.add");
        }
      });
    };
    // 新增按钮操作
    const handleAdd = () => {
      open.value = true;
      drawerTitle.value = t("common.add");
    };
    // 更新按钮操作
    const handleUpdate = (row) => {
      getNoticeById(row.id).then((res) => {
        open.value = true;
        drawerTitle.value = t("common.update");
        nextTick(() => {
          Object.keys(formState).forEach((key) => {
            formState[key] = res.data[key];
          });
        });
      });
    };

    onMounted(async () => {
      typeOptions.value = await getDict("sys_notice_type");
      disableOptions.value = await getDict("sys_normal_disable");
      disableOptions.value.forEach((item) => {
        item.label = item.dictLabel;
        item.value = item.dictValue;
      });
      formDataObj[1].options = typeOptions.value;
      formDataObj[2].options = disableOptions.value;
    });

    expose({
      handleShow,
    });

    return {
      t,
      open,
      drawerTitle,
      BaseFormRef,
      formState,
      formDataObj,
      rules,
      handleClose,
      handleSubmit,
      confirm,
      handleAdd,
      handleUpdate,
    };
  },
});
</script>
